<template>
    <div v-if="total >= 10" class="Pagenation">
        <div class="title">
            <div v-if="isEn" class="Enlish">
                Showing {{ start }} to {{ end }} of {{ total }} rows

                <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" v-if="showSelect" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
                    <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                        {{ item }}
                    </a-select-option>
                </a-select> records
            </div>
            <div v-else-if="isArabic" class="Enlish">
                عرض {{ start }} ل {{ end }} ل {{ total }} صفوف

                <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" v-if="showSelect" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
                    <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                        {{ item }}
                    </a-select-option>
                </a-select> السجلات
            </div>
            <div v-else class="chinese">
                显示第 {{ start }} 到第 {{ end }} 条记录，总共 {{ total }} 条记录 每页显示
                <a-select :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" v-if="showSelect" class="select" v-model:value="currentPageSize" @change="handleChangePageSize">
                    <a-select-option v-for="(item, index) in opts" :value="item" :key="index">
                        {{ item }}
                    </a-select-option>
                </a-select>条记录
            </div>
        </div>
        <a-pagination hideOnSinglePage v-model:current="pageNo" v-model:page-size="pageSize" :total="total"
            @change="handleChange">
            <template #itemRender="{ type, originalElement }">
                <a v-if="type === 'prev'">
                    <a-button class="pre-btn" type="default">{{
                        $t("prev")
                    }}</a-button>
                </a>
                <a v-else-if="type === 'next'">
                    <a-button class="next-btn" type="default">{{
                        $t("next")
                    }}</a-button>
                </a>
                <component :is="originalElement" v-else></component>
            </template>
        </a-pagination>

    </div>
</template>
<script lang="ts" setup>
import { computed, watch, defineEmits, ref } from 'vue';
import { useI18n } from "vue-i18n";
import { useLanguage } from "@/hooks/index"
const { isEn, isCn, isArabic } = useLanguage()
const { t: $t } = useI18n();
const props = defineProps({
    pages: {
        required: true,
        type: Object,
        default: () => { },
    },
    len: {
        required: true,
        type: Number,
        default: 0,
    },
    total: {
        required: true,
        type: Number,
        default: 10,
    },
    showSelect: {
        type: Boolean,
        default: true,
    },
});
let pageSize = ref(30)
let pageNo = ref(1)
let total = ref(20)
let currentPageSize = ref(30)
let opts = ref(["30", "60", "90", "100"])
let start = computed(() => {
    if (pageNo.value == 1) return 1
    const page = pageNo.value - 1
    return (page * pageSize.value) + 1
})
let end = computed(() => {
    return start.value + props.len - 1
})
const emit = defineEmits(['pager-change']);
watch(
    () => props.pages,
    (newVal, oldValue) => {
        pageNo.value = newVal?.pageNo;
        pageSize.value = newVal?.pageSize;
        currentPageSize.value = newVal?.pageSize
    },
    { immediate: true, deep: true }
);
watch(
    () => props.total,
    (newVal, oldValue) => {
        total.value = newVal;
        // consolelog('total', total.value)
    },
    { immediate: true, deep: true }
);
const handleChangePageSize = () => {
    const page = { pageSize: currentPageSize.value, pageNo: pageNo.value };
    emit('pager-change', page);
}
const handleChange = (no, size) => {
    const page = { pageSize: size, pageNo: no };
    emit('pager-change', page);
}
</script>
<style lang="scss" scoped>
.Pagenation {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .title {
        font-size: 12px;
        color: rgb(103, 106, 108);

        .select {
            background-color: #676a6c;
            border-radius: 3px;
            color: #fff;
        }
    }

    .ant-pagination {
        :deep(.ant-pagination-item) {
            background-color: #fff !important;
            border-radius: 2px !important;
            border: 1px solid hsl(0, 2%, 89%) !important;
        }

        :deep(.ant-pagination-item-active) {
            background-color: var(--bg-pagination) !important;
            border: none !important;
            color: #fff !important;
            border-color: transparent !important;

            a {
                color: #fff;
            }
        }
    }

}

:deep(.ant-pagination-options) {
    display: none;
}

:deep(.ant-btn) {
    border-radius: 0;
}

.pre-btn {
    font-size: 12px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.next-btn {
    font-size: 12px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

:deep(.ant-pagination-prev) {
    border-radius: 0;
    margin-inline-end: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

:deep(.ant-pagination-item) {
    border-radius: 0;
    border: 1px #eee solid;
    margin-inline-end: 0;
}

:deep(.ant-pagination-jump-next) {
    border-radius: 0;
    border: 1px #eee solid;
    margin-inline-end: 0;
}

:deep(.ant-pagination-item-active) {
    background-color: #62b196;

    a {
        color: #fff;
    }
}

:deep(.ant-select .ant-select-arrow) {
    display: block !important;
    color: #fff;
}

:deep(.ant-select .ant-select-selector) {
    border-bottom: none !important;
}

:deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
    color: #fff;
}
</style>